<template>
	<!-- <view class="uiwu uiwu-ios" :style="{ 'background': `url(${info.invite_qrcode}) no-repeat` }">
		<uiwu-footer bg-color="transparent">
			<view class="uiwu-footer">
				<view class="uiwu-footer-box" @tap="saveBtn">
					<image src="@/static/image/poster-btn.png" style="width: 500rpx;" mode="widthFix"></image>
				</view>
			</view>
		</uiwu-footer>
	</view> -->

	<!-- #ifdef WEB || APP -->
	<!-- 214 183 -->
	<view class="uiwu uiwu-ios">
		<image class="uiwu-image height-full" :src="info.invite_qrcode" mode="aspectFill"
			style="position: fixed;left: 0;top: 0px; width:100%;height: 100%;"></image>
		<view class="flex justify-center absolute w-full bottom-12" style="z-index: 99;">
			<!-- #ifdef WEB -->
			<image src="@/static/image/poster-btn2.png" mode="widthFix" style="width: 500rpx;"></image>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<image src="@/static/image/poster-btn.png" mode="widthFix" style="width: 500rpx;" @tap="saveBtn"></image>
			<!-- #endif -->
		</view>
	</view>
	<!-- #endif -->
</template>

<script lang="ts" setup>
import { invitePoster, uiwu } from '@/api/interface/interface';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
const info = ref({
	invite_qrcode: "",
	invite_poster: ''
})
const getinvitePoster = async (): Promise<any> => {
	const { data } = await invitePoster({});
	info.value = data
}
/**
 * 保存图片
 */
const saveBtn = () => {
	uiwu.loading('正在保存...', true)
	uni.downloadFile({
		url: info.value.invite_qrcode,
		success: ({ tempFilePath }) => {
			// #ifdef APP || MP
			uni.showModal({
				title: "温馨提示",
				content: "为了保存邀请海报，我们需要获取相册权限",
				success(res) {
					if (res.confirm) {
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success: () => {
								uni.hideLoading()
								uiwu.toast('图片已保存至相册')
							},
							fail: (err) => {
								uni.hideLoading()
								uiwu.toast(`图片保存失败`)
							}
						})
					} else {
						uni.showToast({
							title: "您已点击取消"
						})
					}

				}
			})
			// #endif

		},
		fail: (err) => {
			uni.hideLoading()
			uiwu.toast(`文件下载失败${JSON.stringify(err)}`)
		}
	})
}
onLoad(() => {
	getinvitePoster()
})
</script>

<style lang="scss">
.uiwu {
	width: 100%;
	height: 100vh;
	// background: url('@/static/image/haibaobg.png') no-repeat 0 0;
	/* #ifdef WEB */
	background: rgba(230, 0, 18, 1);
	/* #endif */

}

.height-full {
	//height: calc(100vh - 34px);
	height: 100vh;
}

.uiwu-image {
	position: absolute;
	left: 0;
	right: 0;
	top: 435rpx;
	margin: auto;
}

.uiwu-footer {
	width: 100%;
	padding: 15rpx 24rpx 180rpx;

	&-box {
		position: relative;
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			width: 100%;
			height: 88rpx;
			background: #FAC500;
			border-radius: 40rpx;
			border: 3rpx solid #231815;
			position: absolute;
			left: -5rpx;
			top: -6rpx;
			z-index: 9;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;

			&:nth-child(2) {
				z-index: 8;
				left: 5rpx;
				top: 6rpx;
				background: #FCE5C7;
			}
		}
	}
}
</style>
